<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>总值： {{total}}</h1>

        <!-- 2. 将我们的函数作为自定义事件传递到子组件 -->
        <counter @calcclick="calc"></counter>
        <counter @calcclick="calc"></counter>
        <counter @calcclick="calc"></counter>
        <counter @calcclick="calc"></counter>

    </div>
</body>


<template id="counter">
    <div style="border: 1px solid red; padding: 10px;">
        <button @click="reduce"> - </button>
        &#X3000;
        <span>{{count}}</span>
        &#X3000;
        <button @click="add"> + </button>
    </div>
</template>

<script>



    const counter = {
        template: '#counter',
        data() {
            return {
                count: 0
            }
        },
        methods: {
            reduce() {
                this.count--
                this.$emit('calcclick', -1)
            },
            add() {
                this.count++

                // 3. 在子组件中触发自定义事件名称，且将参数携带过去
                this.$emit('calcclick', 1)
            },
        }
    }

    const app = {
        data() {
            return {
                total: 0
            }
        },
        methods: {
            // 1. 在父组件中定义接收子组件传递参数的方法
            calc(val) {
                console.log('接收到值：' + val);
                this.total += val
            }
        },
        components: {
            counter
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>